<template>
  <div class="cus-button" :class="btnClass" :style="[btnStyle]" @click="onClick">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "cus-button",
    props: {
      type: {
        type: String,
        default: ''
      },
      textColor: {
        type: String,
        default: '#515a6e',
      },
      size: {
        type: String,
        default: 'default'
      },
      ghost: {
        type: Boolean,
        default: false,
      }
    },
    computed: {
      btnClass() {
        if (!this.type) {
          return 'cus-default-button';
        } else if (this.type === 'info') {
          return 'cus-info-button'
        } else if (this.type === 'primary') {
          return 'cus-primary-button'
        } else if (this.type === 'text-primary') {
          return 'cus-text-primary-button'
        } else if (this.type === 'text-error') {
          return 'cus-text-error-button'
        }
      },
      btnStyle() {
        let style = {};
        if (this.size == 'default') {
          style.height = '40px';
        } else if (this.size == 'small') {
          style.height = '32px'
        }

        if (!this.type) {
          Object.assign(style, {
            color: '#1E6FFF',
            border: '1px solid #1E6FFF'
          })
        } else if (this.type === 'info') {
          Object.assign(style, {
            color: 'color: rgba(0, 0, 0, 0.65);',
            border: '1px solid rgba(0, 0, 0, 0.15)'
          })
        } else if (this.type == 'primary') {
          Object.assign(style, {
            background: '#1E6FFF',
            color: '#FFFFFF'
          })
        } else if (this.type.includes('text')) {
          Object.assign(style, {
            color: this.textColor
          })
        }

        return style;
      }
    },
    methods: {
      onClick() {
        this.$emit('onClick');
      }
    }
  }
</script>

<style scoped lang="less">
  .cus-button {
    transition: all .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    fontFamily: "PingFangSC-Regular, PingFang SC";
    fontWeight: 400;
    border-radius: 2px;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .cus-default-button:hover {
    color: #80BFFE !important;
    border: 1px solid #80BFFE !important;
  }

  .cus-info-button:hover {
    color: #80BFFE !important;
    border: 1px solid #80BFFE !important;
  }

  .cus-primary-button:hover {
    background: #80BFFE !important;
  }

  .cus-text-primary-button:hover {
    color: #80BFFE !important;
  }

  .cus-text-error-button:hover {
    color: #FFA4A3 !important;
  }
</style>
